<style>
  .river-record-page {
    padding: 20px;
    position: relative;
    padding-left: 250px;
    height: 100%;
  }

  .river-record-page .left-seleced {
    width: 200px;
    position: absolute;
    height: 90%;
    border: 1px solid #aaa;
    left: 20px;
    top: 20px;
    padding: 10px;
  }

  .river-record-page .left-seleced select {
    width: 95%;
    height: 35px;
    line-height: 35px;
    padding: 0;
    margin: 0 auto;
  }

  .river-record-page .nav-tabs {
    border: none;
  }

  .river-record-page .nav-tabs > li {
    margin-bottom: 15px;
  }

  .river-record-page .nav-tabs > li > a {
    border: 1px solid #ccc;
    border-radius: 0;
    margin: 0;
    color: #111;
    font-weight: normal;
  }

  .river-record-page .nav-tabs > li > a:not(:last-child) {
    border-right: none;
  }

  .river-record-page .nav-tabs > li.active > a, .river-record-page .nav-tabs > li.active > a:hover, .river-record-page .nav-tabs > li.active > a:focus {
    border: none;
    background-color: #4fb1ec;
    color: #fff;
    border-radius: 0;
    border: 1px solid #4fb1ec;
    border-right: 0;
  }

  .river-record-page .table-box {
    margin-top: 15px;
  }

  .river-record-page .table-box table tr td {
    text-align: center;
    color: #111;
    padding: 12px;
  }

  .river-record-page .item2-select {
    display: flex;
    align-items: center;
    margin-top: 30px;
  }

  .river-record-page .item2-select label {
    width: 76px;
    font-weight: normal;
    margin: 0;
  }

  .river-record-page .item2-select select {
    width: 200px;
  }
</style>
<template>
  <div class="wrapper wrapper-content animated fadeInRight v-cloak" style="height:100%" v-cloak>
    <div class="river-record-page">
      <div class="left-seleced">
        <select id="riverId" class="form-control" placeholder="请选择河道">
          <option>请选择...</option>
          <option v-if="rivers != null && rivers.length > 0"
                  v-for="(river, index) in rivers" :value="river.id">{{river.name}}
          </option>
        </select>
      </div>
      <div class="right-content">
        <div>

          <!-- Nav tabs -->
          <ul class="nav nav-tabs" role="tablist" id="tablist">
            <li role="presentation" class="active"><a href="#item1" role="tab" data-toggle="tab">河道名录</a></li>
            <li role="presentation"><a href="#item2" role="tab" data-toggle="tab">排污口</a></li>
            <li role="presentation"><a href="#item3" role="tab" data-toggle="tab">污染源</a></li>
            <li role="presentation"><a href="#item4" role="tab" data-toggle="tab">泵闸信息</a></li>
            <li role="presentation"><a href="#item5" role="tab" data-toggle="tab">测站信息</a></li>
            <li role="presentation"><a href="#item6" role="tab" data-toggle="tab">水功能区信息</a></li>
            <li role="presentation"><a href="#item7" role="tab" data-toggle="tab">取水口信息</a></li>
            <li role="presentation"><a href="#item8" role="tab" data-toggle="tab">污水处理设施</a></li>
            <li role="presentation"><a href="#item9" role="tab" data-toggle="tab">岸线利用</a></li>
            <li role="presentation"><a href="#item10" role="tab" data-toggle="tab">河长公示牌</a></li>
          </ul>

          <!-- Tab panes -->
          <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="item1">
              <div class="table-box">
                <table class="table table-bordered">
                  <tbody>
                  <tr>
                    <td>河道名称</td>
                    <td v-text="riverInfo.name"></td>
                    <td>河长</td>
                    <td v-text="riverInfo.principalName"></td>
                    <td>图片</td>
                  </tr>
                  <tr>
                    <td scope="row">河道起点</td>
                    <td v-text="riverInfo.startAddr"></td>
                    <td>河道终点</td>
                    <td v-text="riverInfo.endAddr"></td>
                    <td rowspan="3">
                      <img :src="riverInfo.imgPath" height="130" width="100">
                    </td>
                  </tr>
                  <tr>
                    <td scope="row">河道长度(km)</td>
                    <td v-text="riverInfo.lengths">1km</td>
                    <td>水域面积(万方)</td>
                    <td v-text="riverInfo.acreage"></td>
                  </tr>
                  <tr>
                    <td scope="row">河道宽度(m)</td>
                    <td v-text="riverInfo.width"></td>
                    <td>河道等级</td>
                    <td v-text="riverInfo.level"></td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="item2">
              <div class="item2-select">
                <label>排污口编号</label>
                <select class="form-control" id="drainOutletId">
                  <option>请选择...</option>
                  <option v-if="drainOutlets != null && drainOutlets.length > 0"
                          v-for="(obj, index) in drainOutlets" :value="obj.id">{{obj.name}}({{obj.code}})
                  </option>
                </select>
              </div>
              <div class="table-box">
                <table class="table table-bordered">
                  <tbody>
                  <tr>
                    <td>排污口编号</td>
                    <td v-text="drainOutletInfo.code"></td>
                    <td>排污口名称</td>
                    <td v-text="drainOutletInfo.name"></td>
                  </tr>
                  <tr>
                    <td scope="row">入河方式</td>
                    <td>
                      <span v-if="drainOutletInfo.inRiverType == 1">沟</span>
                      <span v-else-if="drainOutletInfo.inRiverType == 2">渠</span>
                      <span v-else-if="drainOutletInfo.inRiverType == 3">管道</span>
                      <span v-else="drainOutletInfo.inRiverType == 4">其他</span>
                    </td>
                    <td>所在位置</td>
                    <td v-text="drainOutletInfo.address"></td>
                  </tr>
                  <tr>
                    <td scope="row">规划管理单位</td>
                    <td v-text="drainOutletInfo.manageCompany"></td>
                    <td>行政区划</td>
                    <td v-text="drainOutletInfo.areaNames"></td>
                  </tr>
                  <tr>
                    <td scope="row">所在经度</td>
                    <td v-text="drainOutletInfo.longitude"></td>
                    <td>所在纬度</td>
                    <td v-text="drainOutletInfo.latitude"></td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="item3">暂无信息</div>
            <div role="tabpanel" class="tab-pane" id="item4">
              <div class="item2-select">
                <label>站点名称</label>
                <select class="form-control" id="pumpGateId">
                  <option>请选择...</option>
                  <option v-if="pumpGates != null && pumpGates.length > 0"
                          v-for="(obj, index) in pumpGates" :value="obj.id">{{obj.name}}
                  </option>
                </select>
              </div>
              <div class="table-box">
                <table class="table table-bordered">
                  <tbody>
                  <tr>
                    <td>站点编码</td>
                    <td v-text="pumpGateInfo.code"></td>
                    <td>站点名称</td>
                    <td v-text="pumpGateInfo.name"></td>
                  </tr>
                  <tr>
                    <td scope="row">行政区划</td>
                    <td v-text="riverInfo.areaNames"></td>
                    <td>类型</td>
                    <td v-text="pumpGateInfo.type"></td>
                  </tr>
                  <tr>
                    <td scope="row">经度</td>
                    <td v-text="pumpGateInfo.longitude"></td>
                    <td>纬度</td>
                    <td v-text="pumpGateInfo.latitude"></td>
                  </tr>
                  <tr>
                    <td scope="row">建成时间</td>
                    <td v-text="pumpGateInfo.completionTime"></td>
                    <td>工程等级</td>
                    <td v-text="pumpGateInfo.engineeringLevel"></td>
                  </tr>
                  <tr>
                    <td scope="row">建筑物等级</td>
                    <td v-text="pumpGateInfo.buildingLevel"></td>
                    <td>闸门/水泵数量</td>
                    <td v-text="pumpGateInfo.pumpsNumber"></td>
                  </tr>
                  <tr>
                    <td scope="row">节制闸过闸流量/装机流量（m/s）</td>
                    <td v-text="pumpGateInfo.sluiceFlow"></td>
                    <td>闸门总净宽/设计扬程（m）</td>
                    <td v-text="pumpGateInfo.gateWidth"></td>
                  </tr>
                  <tr>
                    <td scope="row">装机功率（kw)</td>
                    <td v-text="pumpGateInfo.installedPower"></td>
                    <td>水闸管理单位名称</td>
                    <td v-text="pumpGateInfo.management"></td>
                  </tr>
                  <tr>
                    <td scope="row">站点地址</td>
                    <td v-text="pumpGateInfo.siteAddress"></td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>


            <div role="tabpanel" class="tab-pane" id="item5">
              <div class="item2-select">
                <label>测站名称</label>
                <select class="form-control" id="stationId">
                  <option>请选择...</option>
                  <option v-if="stations != null && stations.length > 0"
                          v-for="(obj, index) in stations" :value="obj.id">{{obj.name}}
                  </option>
                </select>
              </div>
              <div class="table-box">
                <table class="table table-bordered">
                  <tbody>
                  <tr>
                    <td>测站名称</td>
                    <td v-text="stationInfo.name"></td>
                    <td>测站类型</td>
                    <td v-text="stationInfo.type"></td>
                  </tr>
                  <tr>
                    <td scope="row">所在河道</td>
                    <td v-text="riverInfo.name"></td>
                    <td>站点地址</td>
                    <td v-text="stationInfo.address"></td>
                  </tr>
                  <tr>
                    <td scope="row">行政区划</td>
                    <td v-text="riverInfo.areaNames"></td>
                    <td scope="row">经度</td>
                    <td v-text="stationInfo.longitude"></td>
                  </tr>
                  <tr>
                    <td>纬度</td>
                    <td v-text="stationInfo.latitude"></td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <div role="tabpanel" class="tab-pane" id="item6">
              <div class="item2-select">
                <label>水功能区编号</label>
                <select class="form-control" id="waterFunctionId">
                  <option>请选择...</option>
                  <option v-if="waterFunctions != null && waterFunctions.length > 0"
                          v-for="(obj, index) in waterFunctions" :value="obj.id">{{obj.waterFuncAreaCode}}
                  </option>
                </select>
              </div>
              <div class="table-box">
                <table class="table table-bordered">
                  <tbody>
                  <tr>
                    <td>水功能区编号</td>
                    <td v-text="waterFunctionInfo.waterFuncAreaCode"></td>
                    <td>所在河道</td>
                    <td v-text="riverInfo.name"></td>
                  </tr>
                  <tr>
                    <td scope="row">起点经度</td>
                    <td v-text="waterFunctionInfo.startLon"></td>
                    <td>起点纬度</td>
                    <td v-text="waterFunctionInfo.startLat"></td>
                  </tr>
                  <tr>
                    <td scope="row">终点经度</td>
                    <td v-text="waterFunctionInfo.endLon"></td>
                    <td>终点纬度</td>
                    <td v-text="waterFunctionInfo.endLat"></td>
                  </tr>
                  <tr>
                    <td scope="row">责任单位</td>
                    <td v-text="waterFunctionInfo.responsibleDept"></td>
                    <td>联系电话</td>
                    <td v-text="waterFunctionInfo.phoneNumber"></td>
                  </tr>
                  <tr>
                    <td scope="row">归口管理单位</td>
                    <td v-text="waterFunctionInfo.gkManagementDept"></td>
                    <td>行政区划</td>
                    <td v-text="riverInfo.areaNames"></td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <div role="tabpanel" class="tab-pane" id="item7">
              <div class="item2-select">
                <label>取水口名称</label>
                <select class="form-control" id="intakeId">
                  <option>请选择...</option>
                  <option v-if="intakes != null && intakes.length > 0"
                          v-for="(obj, index) in intakes" :value="obj.id">{{obj.name}}
                  </option>
                </select>
              </div>
              <div class="table-box">
                <table class="table table-bordered">
                  <tbody>
                  <tr>
                    <td>取水口编码</td>
                    <td v-text="intakeInfo.code"></td>
                    <td>取水口名称</td>
                    <td v-text="intakeInfo.name"></td>
                  </tr>
                  <tr>
                    <td scope="row">所在河道</td>
                    <td v-text="riverInfo.name"></td>
                    <td>取水许可证编码</td>
                    <td v-text="intakeInfo.licenceCode"></td>
                  </tr>
                  <tr>
                    <td scope="row">行业类别</td>
                    <td v-text="intakeInfo.industryType"></td>
                    <td>取水用途</td>
                    <td v-text="intakeInfo.purpose"></td>
                  </tr>
                  <tr>
                    <td scope="row">取水方式</td>
                    <td v-text="intakeInfo.way"></td>
                    <td>取水能力（吨）</td>
                    <td v-text="intakeInfo.totalIntake"></td>
                  </tr>
                  <tr>
                    <td scope="row">所在位置</td>
                    <td v-text="intakeInfo.address"></td>
                    <td>经度</td>
                    <td v-text="intakeInfo.longitude"></td>
                  </tr>
                  <tr>
                    <td scope="row">纬度</td>
                    <td v-text="intakeInfo.latitude"></td>
                    <td>取水单位</td>
                    <td v-text="intakeInfo.unit"></td>
                  </tr>
                  <tr>
                    <td scope="row">取水单位责任人</td>
                    <td v-text="intakeInfo.principal"></td>
                    <td>联系电话</td>
                    <td v-text="intakeInfo.phone"></td>
                  </tr>
                  <tr>
                    <td scope="row">归口管理单位</td>
                    <td v-text="intakeInfo.manageCompany"></td>
                    <td>许可取水量（万m³)</td>
                    <td v-text="intakeInfo.allowQuantity"></td>
                  </tr>
                  <tr>
                    <td scope="row">年取水量（万m³）</td>
                    <td v-text="intakeInfo.yearQuantity"></td>
                    <td>行政区划</td>
                    <td v-text="intakeInfo.areaNames"></td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <div role="tabpanel" class="tab-pane" id="item8">
              <div class="item2-select">
                <label>设施名称</label>
                <select class="form-control" id="sewageTreatmentId">
                  <option>请选择...</option>
                  <option v-if="sewageTreatments != null && sewageTreatments.length > 0"
                          v-for="(obj, index) in sewageTreatments" :value="obj.id">{{obj.name}}
                  </option>
                </select>
              </div>
              <div class="table-box">
                <table class="table table-bordered">
                  <tbody>
                  <tr>
                    <td>登记编码</td>
                    <td v-text="sewageTreatmentInfo.code"></td>
                    <td>设施名称</td>
                    <td v-text="sewageTreatmentInfo.name"></td>
                  </tr>
                  <tr>
                    <td scope="row">所在河道</td>
                    <td v-text="riverInfo.name"></td>
                    <td>投运时间</td>
                    <td v-text="sewageTreatmentInfo.startDate"></td>
                  </tr>
                  <tr>
                    <td scope="row">设计处理能力(亿m³/日)</td>
                    <td v-text="sewageTreatmentInfo.processCapacity"></td>
                    <td>处理工艺</td>
                    <td v-text="sewageTreatmentInfo.technology"></td>
                  </tr>
                  <tr>
                    <td scope="row">所在位置</td>
                    <td v-text="sewageTreatmentInfo.address"></td>
                    <td>起点经度</td>
                    <td v-text="sewageTreatmentInfo.longitude"></td>
                  </tr>
                  <tr>
                    <td scope="row">起点纬度</td>
                    <td v-text="sewageTreatmentInfo.latitude"></td>
                    <td>责任单位</td>
                    <td v-text="sewageTreatmentInfo.responsibleAgency"></td>
                  </tr>
                  <tr>
                    <td scope="row">责任人</td>
                    <td v-text="sewageTreatmentInfo.principal"></td>
                    <td>联系电话</td>
                    <td v-text="sewageTreatmentInfo.phone"></td>
                  </tr>
                  <tr>
                    <td scope="row">归口管理单位</td>
                    <td v-text="sewageTreatmentInfo.manageCompany"></td>
                    <td>行政区划</td>
                    <td v-text="sewageTreatmentInfo.areaNames"></td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <div role="tabpanel" class="tab-pane" id="item9">
              <div class="item2-select">
                <label>岸线编码</label>
                <select class="form-control" id="waterShorelineId">
                  <option>请选择...</option>
                  <option v-if="waterShorelines != null && waterShorelines.length > 0"
                          v-for="(obj, index) in waterShorelines" :value="obj.id">{{obj.shorelineCode}}
                  </option>
                </select>
              </div>
              <div class="table-box">
                <table class="table table-bordered">
                  <tbody>
                  <tr>
                    <td>岸线编码</td>
                    <td v-text="waterShorelineInfo.shorelineCode"></td>
                    <td scope="row">所在河道</td>
                    <td v-text="riverInfo.name"></td>
                  </tr>
                  <tr>
                    <td scope="row">河流岸别</td>
                    <td v-text="waterShorelineInfo.riverBank"></td>
                    <td>岸线长度</td>
                    <td v-text="waterShorelineInfo.shorelineLength"></td>
                  </tr>
                  <tr>
                    <td scope="row">利用规划类别</td>
                    <td v-text="waterShorelineInfo.planningType"></td>
                    <td>起点位置名称</td>
                    <td v-text="waterShorelineInfo.startAddr"></td>
                  </tr>
                  <tr>
                    <td scope="row">终点位置名称</td>
                    <td v-text="waterShorelineInfo.endAddr"></td>
                    <td>起点经度</td>
                    <td v-text="waterShorelineInfo.startLon"></td>
                  </tr>
                  <tr>
                    <td scope="row">起点纬度</td>
                    <td v-text="waterShorelineInfo.startLat"></td>
                    <td>终点经度</td>
                    <td v-text="waterShorelineInfo.endLon"></td>
                  </tr>
                  <tr>
                    <td scope="row">终点纬度</td>
                    <td v-text="waterShorelineInfo.endLat"></td>
                    <td scope="row">归口管理单位</td>
                    <td v-text="waterShorelineInfo.gkManagementDept"></td>
                  </tr>
                  <tr>
                    <td scope="row">目前状态</td>
                    <td v-text="waterShorelineInfo.currentState"></td>
                    <td>行政区划</td>
                    <td v-text="riverInfo.areaNames"></td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <div role="tabpanel" class="tab-pane" id="item10">
              <div class="item2-select">
                <label>公示牌编码</label>
                <select class="form-control" id="billboardId">
                  <option>请选择...</option>
                  <option v-if="billboards != null && billboards.length > 0"
                          v-for="(obj, index) in billboards" :value="obj.id">{{obj.code}}
                  </option>
                </select>
              </div>
              <div class="table-box">
                <table class="table table-bordered">
                  <tbody>
                  <tr>
                    <td>公示牌编码</td>
                    <td v-text="billboardInfo.code"></td>
                    <td>所在河道</td>
                    <td v-text="riverInfo.name"></td>
                    <td>图片</td>
                  </tr>
                  <tr>
                    <td scope="row">所在位置</td>
                    <td v-text="billboardInfo.address"></td>
                    <td>所在经度</td>
                    <td v-text="billboardInfo.longitude"></td>
                    <td rowspan="3">
                      <img :src="billboardInfo.imgUrl" height="130" width="100">
                    </td>
                  </tr>
                  <tr>
                    <td scope="row">所在纬度</td>
                    <td v-text="billboardInfo.latitude"></td>
                    <td></td>
                    <td></td>
                  </tr>
                  <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>

          </div>
        </div>

      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
  import '@/assets/css/style.css'
  import $ from '@/assets/js/jquery-vendor.js'
  import 'jquery.cookie'
  import '@/assets/js/datepicker-vendor.js'
  import '@/assets/js/pageTag'
  import axios from 'axios'
  import {site} from '@/assets/js/boss'

  export default {
    data() {
      return {
        rivers: [], // 河道列表
        riverInfo: {}, // 河道详情
        drainOutlets: [], // 排污口列表
        drainOutletInfo: {}, // 排污口详情
        intakes: [], // 取水口列表
        intakeInfo: {}, // 取水口详情
        sewageTreatments: [], // 污水处理列表
        sewageTreatmentInfo: {}, // 污水处理详情
        billboards: [], // 河长公示牌列表
        billboardInfo: {}, // 河长公示牌详情
        waterShorelines: [], // 水域岸线列表
        waterShorelineInfo: {}, // 水域岸线详情
        pumpGates: [], // 泵闸信息列表
        pumpGateInfo: {}, // 泵闸信息详情
        stations: [], // 测站信息列表
        stationInfo: {}, // 测站信息详情
        waterFunctions: [], // 水功能区信息列表
        waterFunctionInfo: {} // 水功能区信息详情
      }
    },
    mounted() {
      let that = window.$vueApp = this;
      that.riverList();

      $('#riverId').change(function () {
        let riverId = $(this).val();
        that.riverChange(riverId);
      });
      $('#tablist li').click(function () { // 点击时才加载列表数据，避免请求数据最过大太卡
        that.loadList($(this).find('a').attr('href'), $('#riverId').val());
      });
      $('#drainOutletId').change(function () {
        that.getInfo('drainOutlets', 'drainOutletInfo', $(this).val());
      });
      $('#intakeId').change(function () {
        that.getInfo('intakes', 'intakeInfo', $(this).val());
      });
      $('#sewageTreatmentId').change(function () {
        that.getInfo('sewageTreatments', 'sewageTreatmentInfo', $(this).val());
      });
      $('#billboardId').change(function () {
        that.getInfo('billboards', 'billboardInfo', $(this).val());
      });
      $('#waterShorelineId').change(function () {
        that.getInfo('waterShorelines', 'waterShorelineInfo', $(this).val());
      });
      $('#pumpGateId').change(function () {
        that.getInfo('pumpGates', 'pumpGateInfo', $(this).val());
      });
      $('#stationId').change(function () {
        that.getInfo('stations', 'stationInfo', $(this).val());
      });
      $('#waterFunctionId').change(function () {
        that.getInfo('waterFunctions', 'waterFunctionInfo', $(this).val());
      });
    },
    watch: {
      // result: function (val) {
      //   this.$nextTick(function () { console.info('变量result渲染完成'); }
      // }
    },
    methods: {
      riverList() {
        let that = this;
        axios.get(site.riverInfo.list, {}).then(function (response) {
          var result = response.data;
          if (result.code === 0) {
            that.rivers = result.data;

            // 如果传了河道参数，则隐藏左边河道选择
            let tempRiverId = sessionStorage.getItem('/river/riverRecord/riverId');
            if (tempRiverId && tempRiverId !== '') {
              that.riverChange(tempRiverId);
              $('.left-seleced').addClass('hide');
            }
          } else {
            alert(result.message);
          }
        });
      },
      riverChange(riverId) {
        let that = this;
        that.riverInfo = {};
        that.drainOutlets = [];
        that.drainOutletInfo = {};
        that.intakes = [];
        that.intakeInfo = {};
        that.sewageTreatments = [];
        that.sewageTreatmentInfo = {};
        that.billboards = [];
        that.billboardInfo = {};
        that.waterShorelines = [];
        that.waterShorelineInfo = {};
        that.pumpGates = [];
        that.pumpGateInfo = {};
        that.stations = [];
        that.stationInfo = {};
        that.waterFunctions = [];
        that.waterFunctionInfo = {};
        that.getRiverInfo(riverId);
        that.loadList($('#tablist li.active>a').attr('href'), riverId);
      },
      getRiverInfo(riverId) {
        let that = this;
        for (let i in that.rivers) {
          let obj = that.rivers[i];
          if (obj.id === riverId) {
            that.riverInfo = obj;
            break;
          }
        }
      },
      getInfo(listObj, infoObj, id) { // 根据ID获取详细信息
        let that = this;
        for (let i in that[listObj]) {
          let obj = that[listObj][i];
          if (obj.id === id) {
            that[infoObj] = obj;
            break;
          }
        }
      },
      loadList(itemId, riverId) { // 判断当前tab，加载列表数据
        let that = this;
        if (itemId === '#item1') { // 河道名录
          return;
        }
        if (itemId === '#item2') { // 排污口
          if (that.drainOutlets && that.drainOutlets.length > 0) {
            return; // 有数据不再加载
          }
          axios.get(site.drainOutlet.list + '?riverId=' + riverId, {}).then(function (response) {
            let result = response.data;
            if (result.code === 0) {
              that.drainOutlets = result.data;
            } else {
              alert(result.message);
            }
          })
        }
        if (itemId === '#item4') { // 泵闸信息
          if (that.pumpGates && that.pumpGates.length > 0) {
            return; // 有数据不再加载
          }
          axios.get(site.pumpGate.list + '?riverCourseCode=' + riverId, {}).then(function (response) {
            let result = response.data;
            if (result.code === 0) {
              that.pumpGates = result.data;
            } else {
              alert(result.message);
            }
          })
        }
        if (itemId === '#item5') { // 测站信息
          if (that.stations && that.stations.length > 0) {
            return; // 有数据不再加载
          }
          axios.get(site.station.list + '?riverCourseCode=' + riverId, {}).then(function (response) {
            let result = response.data;
            if (result.code === 0) {
              that.stations = result.data;
            } else {
              alert(result.message);
            }
          })
        }
        if (itemId === '#item6') { // 水功能区信息
          if (that.waterFunctions && that.waterFunctions.length > 0) {
            return; // 有数据不再加载
          }
          axios.get(site.waterFunctionInfo.list + '?riverCourseCode=' + riverId, {}).then(function (response) {
            let result = response.data;
            if (result.code === 0) {
              that.waterFunctions = result.data;
            } else {
              alert(result.message);
            }
          })
        }
        if (itemId === '#item7') { // 取水口信息
          if (that.intakes && that.intakes.length > 0) {
            return; // 有数据不再加载
          }
          axios.get(site.intakeInfo.list + '?riverId=' + riverId, {}).then(function (response) {
            let result = response.data;
            if (result.code === 0) {
              that.intakes = result.data;
            } else {
              alert(result.message);
            }
          })
        }
        if (itemId === '#item8') { // 污水处理设施
          if (that.sewageTreatments && that.sewageTreatments.length > 0) {
            return; // 有数据不再加载
          }
          axios.get(site.sewageTreatment.list + '?riverId=' + riverId, {}).then(function (response) {
            let result = response.data;
            if (result.code === 0) {
              that.sewageTreatments = result.data;
            } else {
              alert(result.message);
            }
          })
        }
        if (itemId === '#item9') { // 岸线利用
          if (that.waterShorelines && that.waterShorelines.length > 0) {
            return; // 有数据不再加载
          }
          axios.get(site.waterShoreline.list + '?riverCourseCode=' + riverId, {}).then(function (response) {
            let result = response.data;
            if (result.code === 0) {
              that.waterShorelines = result.data;
            } else {
              alert(result.message);
            }
          })
        }
        if (itemId === '#item10') { // 河长公示牌
          if (that.billboards && that.billboards.length > 0) {
            return; // 有数据不再加载
          }
          axios.get(site.riverBillboard.list + '?riverId=' + riverId, {}).then(function (response) {
            let result = response.data;
            if (result.code === 0) {
              that.billboards = result.data;
            } else {
              alert(result.message);
            }
          })
        }
      }
    }
  }
</script>
